<template>
  <div>
    <p>近期天气</p>
    <div class="box">
      <div class="top">
        <div v-for="weather in weatherArr" :key="weather.id">
          <span>{{ weather.week }}</span>
          <span>{{ weather.date }}</span>
          <span>{{ weather.weather }}</span>
          <span>{{ weather.power }}</span>
        </div>
      </div>
      <div class="chart">
        <v-chart :option="charts"></v-chart>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import { storeToRefs } from 'pinia'
import { useWeatherStore } from '@/strores/useWeatherStore'
const weather = useWeatherStore()
const { getIpWeather } = weather
const { weatherArr,charts } = storeToRefs(weather)
onMounted(async () => {
  getIpWeather()
})
</script>

<style lang="scss" scoped>
.box {
  margin-top: 0.5rem;
  padding-top: 2.5rem;
  padding-left: 3rem;
  padding-right: 3rem;
  background-color: rgb(0 78 113);
  .top {
    display: flex;
    gap: 1.5rem;
    div {
      flex: 1 1 0%;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      text-align: center;
    }
  }
  .chart {
    margin-top: 2.5rem;
    height: 10rem;
    user-select: none;
  }
}
</style>
